@charset "UTF-8";

/* 计算rem */
@function r($px){
    @return ($px/40) * 1rem;
}
/* 减半px */
@function half($px){
    @return ($px/2) * 1px;
}


html,body{
    height: 100%;
    position: relative;
}

/* 头部 */
header{
    .pick{
         width: half(62);
         height: half(43);
         margin-top: 2px;
        img{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
}

/* 主体 */
section{
    position: absolute;
    width: r(750);
    top: half(123);
    bottom: half(135);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    /*登录*/
    .login{
        width: r(708);
        margin: 10px auto;
        .login_pic{
            width: 25%;
            img{
                width: 100%;
            }
        }
        .login_set{
            width: 75%;
            box-sizing: border-box;
            padding-left: half(25);
            .setR{
                margin-top: r(30);
                a{
                    display: block;
                }
                a:nth-of-type(1){
                    font-size: r(30);
                    color: #000000;
                }
                a:nth-of-type(2){
                    font-size: r(26);
                    color: #9d9d9d;
                    margin-top: r(40);
                }
            }
            .setL{
                width: r(41);
                height: r(46);
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                    margin-top: r(60);
                }
            }
        }
    }
    /*图区选择*/
    .picSelt{
        width: r(705);
        margin: 0 auto;
        .picS{
            width: 30%;
            margin-right: 5%;
            img{
                width: 100%;
            }
        }
        .picS:last-of-type{
            margin-right: 0;
        }
    }
    /*更多选择*/
    .moreSelt{
        width: r(708);
        margin: r(20) auto;
        .mS{
            width: 100%;
            margin-bottom: r(23);
            .ms_L{
                >img{
                    width: r(57);
                    height: r(74);
                    vertical-align: middle;
                }
                >span{
                    box-sizing: border-box;
                    font-size: r(26);
                    vertical-align: middle;
                }
            }
            .ms_R{  
                span{
                    font-size: r(24);
                    color: #000000;
                    vertical-align: middle;
                }
                img{
                    width: r(25);
                    height: r(26);
                    vertical-align: middle;
                }
            }
        }
        .mS:nth-child(1){
            .ms_L{   
                >span{
                    padding-left: r(37);
                }
            }
        }
        .mS:nth-child(2){
            .ms_L{
                >img{
                    width: r(71);
                    height: r(74);
                }
                >span{
                    padding-left: r(21);
                }
            }
        }
        .mS:nth-child(3){
            .ms_L{
                >img{
                    width: r(94);
                    height: r(58);
                }
            }
        }
        .mS:nth-child(4){
            .ms_L{
                >img{
                    width: r(59);
                    height: r(59);
                }
                >span{
                    padding-left: r(39);
                }
            }
        }
        .mS:nth-child(5){
            .ms_L{
                >img{
                    width: r(78);
                    height: r(79);
                }
                >span{
                    padding-left: r(21);
                }
            }
        }
        .mS:nth-child(6){
            .ms_L{
                >img{
                    width: r(84);
                    height: r(59);
                }
                >span{
                    padding-left: r(21);
                }
            }
        }
    }
    /*底部按钮*/
    .btnBot{
       width: r(750);
       text-align: center;
       margin-top: r(36);
       .btnL,.btnR{
           width: 25%;
           text-align: center;
           margin-left: 12.5%;
           margin-right: 12.5%;
           span{
               display: block;
               width: r(147);
               height: r(76);
               font-size: r(24);
               border-radius: r(38);
               line-height: r(76);
               color: #FFFFFF;
               background-color: #ff9344;
               margin-left: r(10);
           }
       }
   }
}
